<template>
    <div>
        <Button type="primary" @click="modalForm = true;">添加数据</Button>
        <Button type="primary" @click="removes">删除多个</Button>
          <Tree :data="treeData" @on-select-change="onSelectChange"></Tree>
        <Table border :columns="columns" :data="data" @on-selection-change="onSelect"></Table>
        <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />

        <Modal v-model="modalForm" title="数据操作">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="标题" prop="newsTitle">
                    <Input v-model="formValidate.newsTitle" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="内容" prop="newsContent">
                   <!-- <Input v-model="formValidate.newsContent" placeholder="请输入标题"></Input> -->
                  <textarea  v-model="formValidate.newsContent" id="content" name="content" cols="30" rows="10"></textarea>
                </FormItem>
                <FormItem label="来源" prop="newsSource">
                    <Input v-model="formValidate.newsSource" placeholder="请输入来源"></Input>
                </FormItem>
                <FormItem label="新闻作者" prop="newsAuthor">
                    <Input v-model="formValidate.newsAuthor" placeholder="请输入作者"></Input>
                </FormItem>
                <FormItem label="新闻分类" prop="cateId">
                       <Select  v-model="formValidate.cateId"  style="width:200px">
                          <Option value='5be23e07b36be72fa463cc7d'>时政新闻</Option>
                          <Option value='5be23e11b36be72fa463cc7e'>体育新闻</Option>
                          <Option value='5be23e1cb36be72fa463cc7f'>娱乐新闻</Option>
                      </Select>
                </FormItem>
                 <FormItem label="是否热点" prop="isHot">
                      <RadioGroup v-model="formValidate.isHot">
                        <Radio label='true'>是</Radio>
                        <Radio label='false'>否</Radio>
                    </RadioGroup>
                </FormItem>
                 <FormItem label="是否置顶" prop="isTop">
                    <RadioGroup v-model="formValidate.isTop">
                        <Radio label='true'>是</Radio>
                        <Radio label='false'>否</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="用户" prop="userId">
                    <Input v-model="formValidate.userId" disabled ></Input>
                </FormItem>

                <FormItem>
                    <Button type="primary" @click="getDate();handleSubmit('formValidate')" >Submit</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
            <div slot="footer">
                我就不显示按钮
            </div>
        </Modal>
    </div>

</template>
<script>
import Base from '../../base/Base';
export default {
  mixins: [Base],
  data() {
    return {
      module: 'news',
      treeData:null,
      formValidate: {
        newsTitle: '',
        newsContent:'',
        newsSource: '',
        newsAuthor:'',
        newsDate:'',
        cateId:'',
        isHot:'',
        isTop:''
      },
      ruleValidate:{
       newsTitle: [
          {
            required: true,
            message : '必须输入标题',
            trigger : 'blur'
          }
        ],
       newsContent: [
          {
            required: true,
            message : '必须输入内容',
            trigger : 'blur'
          }
        ],
       newsSource: [
          {
            required: true,
            message : '必须输入来源',
            trigger : 'blur'
          }
        ],
       newsAuthor: [
          {
            required: true,
            message : '必须输入作者',
            trigger : 'blur'
          }
        ]
      },
      columns: [
        {
          type : 'selection',
          width: 50,
          align: 'right'
        },
        {
          title: '新闻ID',
           width : 150,
          key  : '_id'
        },
        {
           title:'分类ID',
          width : 100,
           key:'cateId'
        },
        {
           title:'用户名',
           width : 100,
           key:'userId'

        },
        {
           title:'标题',
             width : 100,
           key:'newsTitle'
        },
        {
           title:'内容',
             width : 100,
           key:'newsContent'
        },
        {
           title:'来源',
             width : 100,
           key:'newsSource'
        },
        {
           title:'发布者',
             width : 100,
           key:'newsAuthor'
        },
        {
           title:'发布时间',
             width : 150,
           key:'newsDate'
        },
        {
           title:'是否热点',
             width :80,
           key:'isHot'
        },
        {
           title:'是否置顶',
             width : 80,
           key:'isTop'
        },
        {
          title : '操作',
          key   : 'action',
          width : 150,
          align : 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      // console.log(params.row)
                      this.edit(params.row._id);
                    }
                  }
                },
                '修 改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                '删 除'
              )
            ]);
          }
        }
      ]
    }
  },
  methods:{
        getDate(){

            this.formValidate.newsDate = moment().format('LL');
              this.modalForm = false;
        },
        getTree(){
              this.axios({
                  url:'http://localhost:3000/cate/list/1',
                  method:'post'
              }).then(res=>{
                  console.log(res.data)
                  this.treeData=res.data;
              });
        },
      onSelectChange(node){

               this.axios({
                url: 'http://localhost:3000/news/list',
                method: 'post',
                data: {
                    cateId:node[0]._id
                }
              }).then(res=>{

                // console.log(res.data);
                this.data=res.data.rows;
              });
        }
  },
  mounted:function() {
    this.getTree();
  }

};

</script>

　